<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://labfile.oss.aliyuncs.com/courses/9775/vue.global.js"></script>    
    <link rel="stylesheet" type="text/css" href="./index.css"/>
</head>
<body>
    <div id="app">
        <h1>蓝桥书店</h1>
        <ul v-for="item in items" :key="item.name">
            <li :class="{active:item.active}">
                <input type="checkbox" v-model="item.active"/>
                {{item.name}}<span>{{item.price}}</span>
            </li>
        </ul>
        <p>Total: <span>{{totalPrice}}</span></p>
    </div>
</body>

</html>
<script type="text/javascript">
Vue.createApp({
    data() {
        return{
            items: [{
                name: 'Web Development',
                price: 3000,
                active: false
            }, {
                name: 'Python',
                price: 1000,
                active: false
            }, {
                name: 'Java',
                price: 2000,
                active: false
            }, {
                name: 'GO',
                price: 2200,
                active: false
            }]
        }
    },
    computed:{
        // 计算被选中的数据的总价
        totalPrice(){
            var sum=0;
            //取到数组里每一个对象
            for(item of this.items){
                if(item.active){
                    sum+=item.price;
                }
            }
            return sum;
        }
    },
    methods: {
        // 切换选中状态
        toggleActive: function(i) {
            
        },
    }
}).mount("#app");
</script>